"use client";

import {useState} from 'react'
import {clsx} from "clsx"

export default function Page () {

  const [selected,setSelected] = useState(0)

  const titleList = [
    "Home",
    "Profile",
    "Contact",
    "User",
    "Default",
  ];

  return (
   <ul className={"bg-blue-700 h-16 w-fit p-2 mt-20 mx-auto flex items-center rounded-full"}>
     {
       titleList.map( (title,index) =>(
         <li className={clsx("w-44 h-12 text-center rounded-full hover:bg-white hover:text-blue-700 leading-[48px] cursor-pointer", selected === index ? "text-blue-700 bg-white " : "text-white")} key={index} onClick={()=>setSelected(index)}>
           {title}
         </li>
       ))
     }
   </ul>
  )
}
